<template>
  <el-card style="margin-top: 10px">
    <div class="header">
      <!-- nav顶栏切换 -->
      <div class="left">
        <el-menu :default-active="state.activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
          <el-menu-item index="0">销售额</el-menu-item>
          <el-menu-item index="1">访问量</el-menu-item>
        </el-menu>
      </div>
      <!-- 按钮组 -->
      <div class="right">
        <el-radio-group v-model="state.radio1" size="default">
          <el-radio-button label="今日" />
          <el-radio-button label="本周" />
          <el-radio-button label="本月" />
          <el-radio-button label="今年" />
        </el-radio-group>
        <!-- 日期选择器 -->
        <div class="block" style="margin-left: 10px; padding-bottom: 4px">
          <el-date-picker v-model="state.value2" type="daterange" :shortcuts="shortcuts" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
        </div>
      </div>
    </div>
    <div class="content">
      <v-chart :option="getBarOption()" autoresize></v-chart>
      <div class="rank-list">
        <div class="title">{{ state.activeIndex === "1" ? "门店销售额排名" : "门店访问量排名" }}</div>
        <div class="list">
          <div class="list-item" v-for="item in rankData" :key="item.no">
            <div class="no" :class="{ 'top-no': item.no <= 3 }">{{ item.no }}</div>
            <div class="name">{{ item.name }}</div>
            <div class="count">{{ item.count }}</div>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>
<script lang="ts">
export default {
  name: "Search",
}
</script>

<script lang="ts" setup>
import * as echarts from "echarts"
import type { EChartsType } from "echarts"
import { ref, computed, reactive } from "vue"
import { useReportData } from "@/stores/reportData" // 引入小菠萝获取数据
import useFormat from "@/hooks/useFormat"
const reportDataStore = useReportData()
// const radio1 = ref("本周")
// const activeIndex = ref("1")
// const value2 = ref("")
// 统一用reactice管理
const state = reactive({
  radio1: "本周",
  value2: "",
  activeIndex: "1",
})
const handleSelect = (key: string) => {
  // 当点击时将标识切换,以便将来可以方便的根据标识展示不同的数据
  console.log(key)
  state.activeIndex = key
}
// 日期选择器
const shortcuts = [
  {
    text: "上一周",
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
      return [start, end]
    },
  },
  {
    text: "上一个月",
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
      return [start, end]
    },
  },
  {
    text: "前三个月",
    value: () => {
      const end = new Date()
      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
      return [start, end]
    },
  },
]

// 准备数据 销售额与访问量
// 1. 使用计算属性来简化一下数据
const orderFullYear = computed(() => reportDataStore.reportData.orderFullYear)
const userFullYear = computed(() => reportDataStore.reportData.userFullYear)
const orderFullYearAxis = computed(() => reportDataStore.reportData.orderFullYearAxis)
const userFullYearAxis = computed(() => reportDataStore.reportData.userFullYearAxis)
const orderRank = computed(() => reportDataStore.reportData.orderRank)
const userRank = computed(() => reportDataStore.reportData.userRank)
const rankData = computed(() => (state.activeIndex === "1" ? orderRank.value : userRank.value))

// 引入了echarts后只需要在标签中使用v-echarts即可,在标签中使用属性option="写好的配置项",autosize是自动变成响应式,拖动页面可随着视图的变化而变化

// 2. 准备生成图表时的配置项内容
const getBarOption = () => {
  const text = state.activeIndex === "1" ? "销售额趋势" : "访问量趋势"
  return {
    title: {
      text,
      textStyle: {
        fontSize: 14,
      },
    },
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    xAxis: {
      type: "category",
      // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      // 如果点击的是销售额,就展示销售额的数据,否则暂时展示访问量的数据,在根据v-echarts动态渲染成表格
      data: state.activeIndex === "1" ? orderFullYearAxis.value : userFullYearAxis.value,
    },
    yAxis: {
      splitLine: {
        lineStyle: {
          type: "dotted",
          color: "#eee",
        },
      },
    },
    grid: {
      left: 50,
      right: 50,
      bottom: 50,
      top: 50,
    },
    series: [
      {
        // data: [120, 200, 150, 80, 70, 110, 130],
        data: state.activeIndex === "1" ? orderFullYear.value : userFullYear.value,
        type: "bar",
        barWidth: "35%",
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
      },
    ],
  }
}
</script>
<style lang="scss" scoped>
// scoped 描述,样式只能作用于当前的组件和子组件的根标签,注意包括根标签也可以生效
.header {
  position: relative;
  .right {
    position: absolute;
    top: 10px;
    right: 20px;
    display: flex;
    align-items: center;
  }
}
.content {
  display: flex;
  height: 270px;
  .echarts {
    flex: 5;
  }
  .rank-list {
    flex: 2;
    .title {
      // 标题样式
      font-size: 14px;
      color: #333;
      font-weight: 500;
      margin-top: 20px;
    }
    .list {
      margin-top: 15px;
      .list-item {
        display: flex;
        align-items: center;
        height: 20px;
        font-size: 12px;
        margin: 6px 20px 6px 0;
        .no {
          width: 20px;
          height: 20px;
          color: #333;
          display: flex;
          justify-content: center;
          align-items: center;
          &.top-no {
            border-radius: 50%;
            background-color: #000;
            color: #fff;
            font-weight: 300;
          }
        }

        .name {
          margin-left: 10px;
        }
        .count {
          flex: 1;
          text-align: right;
        }
      }
    }
  }
}
</style>
